<template>
    <div class="table-container">
        <div class="table-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path:'/quitList'}">离职继承</el-breadcrumb-item>
            <el-breadcrumb-item>分配客户</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
        <div class="table-search">
            <el-row>
                <!-- <div class="item">分配状态
                    <el-select v-model="valueStatus" placeholder="请选择">
                        <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        clearable
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
                <div class="item" style="margin-top:10px;">
                    时间
                    <el-date-picker
                    v-model="valueTime"
                    type="daterange"
                    @change="selectTime"
                    clearable
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </el-row>
            <el-row>
                <!-- <el-input
                style="width: 200px;margin-right: 10px"
                placeholder="请输入员工信息查询"
                v-model="keyword"
                clearable
                @clear="resetData"
                >
                </el-input> -->
                <el-button type="success" @click="toBack">返回</el-button>
            </el-row>
        </div>
        <div class="table-content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="待分配客户" name="1">
                    <el-table
                        border
                        empty-text="当前数据空空如也"
                        ref="multipleTable"
                        :data="customeList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @select="selectedRow"
                        @select-all="selectedAll"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="userid" label="序号" width="100"></el-table-column>
                        <el-table-column prop="room_type" label="客户名" width="auto"></el-table-column>
                        <el-table-column prop="id" label="微信号" width="auto"></el-table-column>
                        <el-table-column prop="name" label="手机号" width="auto"></el-table-column>
                        <el-table-column prop="mobile" label="添加时间" width="auto"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="待分配客户群" name="2">
                    <el-table
                        border
                        empty-text="当前数据空空如也"
                        ref="multipleTable"
                        :data="groupList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @select="selectedRow"
                        @select-all="selectedAll"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="userid" label="序号" width="100"></el-table-column>
                        <el-table-column prop="owner" label="群主id" width="auto"></el-table-column>
                        <el-table-column prop="data.member_total" label="客户数" width="auto"></el-table-column>
                        <!-- <el-table-column prop="mobile" label="添加时间" width="auto">
                            <template slot-scope="scope">
                                <p>{{$moment(scope.row)}}</p>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <div class="page-nav">
                <el-button type="primary" size="mini" @click="toDistribution">分配</el-button>
                <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            multipleSelection: [],
            keyword:'',
            page:1,
            pageSize:10,
            total:0,
            statusList:[{
                label:'待分配',
                value:'待分配'
            },{
                label:'已分配',
                value:'已分配'
            }], //状态列表
            valueStatus:'', //选择的分配状态
            valueTime:[],//选择的时间
            offerList:[],
            activeName:'1',
            startDate:'',
            endDate:'',
            pageGroup:1,
            pageSizeGroup:10,
            userids:'',
            customeList:[], //客户列表数据
            groupList:[],//群列表数据
        }
    },
    mounted() {
        this.userids = this.$route.query.userids
        this.getNeedCustom()
    },
    methods: {

        // 选择时间
        selectTime(){
			this.startDate = this.valueTime?this.$moment(this.valueTime[0]).format('yyyy-MM-DD'):'';
			this.endDate = this.valueTime?this.$moment(this.valueTime[1]).format('yyyy-MM-DD'):'';
			if(this.activeName=='1'){
                this.getNeedCustom()
            }else{
                this.getNeedGroup()
            }
        },

        // 切换tabs
        handleClick(e){
            if(e.name=='1'){
                this.getNeedCustom()
            }else{
                this.getNeedGroup()
            }
        },

        // 获取待分配客户
        getNeedCustom(){
            let params = {
                userids:this.userids,
                partyIds:'',
                start:this.startDate,
                end:this.endDate
            }
            this.$http.post('/api/admin/qywx/Index/getStatisticsCustomer',params).then(res=>{
                console.log(res,'待分配客户');
                if(res.code==1){
                    this.customeList = res.behavior_data?res.behavior_data:[]
                    this.total = res.data.count
                }
            })
            
        },
        // 获取待分配群
        getNeedGroup(){
            let params = {
                userids:this.userids,
                start:this.startDate,
                end:this.endDate,
                page:this.pageGroup,
                pagesize:this.pageSizeGroup
            }
            this.$http.post('/api/admin/staff/Index/getStatisticsGroup',params).then(res=>{
                console.log(res,'待分配群');
                if(res.code==1){
                    this.groupList = res.items?res.items:[]
                    this.total = res.total
                }
            })
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            if(this.activeName=='1'){
                this.getNeedCustom()
            }else{
                this.getNeedGroup()
            }
        },
        handleCurrentChange(val) {
            this.page = val;
            if(this.activeName=='1'){
                this.getNeedCustom()
            }else{
                this.getNeedGroup()
            }
        },
        // 选择
        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },

        // 返回按钮
        toBack(){
            this.$router.back(1)
        },

        // 搜索按钮
        resetData(){

        },

        // 分配按钮
        toDistribution(){
            if(!this.multipleSelection.length){
                this.$message.warning('请选择要分配的项')
                return
            }
        }
    },
}
</script>

<style lang="less" scoped>
@import 'detail.less';
</style>


